<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课表项管理</title>
</head>
<body>
<div id="app">
    <!--搜索框-->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="班级名：">
            <el-input v-model="searchForm.task.cclasses.classesName" placeholder="模糊查询" style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item label="课程名：">
            <el-input v-model="searchForm.task.cclasses.course.courseName" placeholder="模糊查询"
                      style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item label="教师名：">
            <el-input v-model="searchForm.task.teacher.teacherName" placeholder="模糊查询" style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item label="教室名：">
            <el-input v-model="searchForm.room.roomName" placeholder="模糊查询" style="width: 100px"></el-input>
        </el-form-item>

        <el-form-item label="时间：">
            <el-select v-model="week" clearable placeholder="选择星期" style="width:130px">
                <el-option
                        clearable
                        v-for="item in options1"
                        :key="item.id"
                        :label="item.weekName"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-select v-model="time" clearable placeholder="选择节数" style="width:130px">
                <el-option
                        clearable
                        v-for="item in options2"
                        :key="item.id"
                        :label="item.timeName"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>


        <el-form-item>
            <el-button type="primary" @click="selectByCondition">查询</el-button>
        </el-form-item>
    </el-form>

    <!-- 批量    -->
    <el-row>
        <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
        <el-button type="primary" plain @click="selectTask">手动排课</el-button>
        <el-button style="margin-left: 920px" type="primary" plain @click="reArrangeCourse">自动排课</el-button>
    </el-row>

    <!--    表格-->
    <el-table
            v-loading="loading"
            :data="tableData"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
    >
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                fixed
                width="40px"
                prop="task.id"
                label="ID"
                align="center">
        </el-table-column>
        <el-table-column
                fixed
                prop="task.cclasses.classesName"
                label="班级名"
                align="center">
        </el-table-column>
        <el-table-column
                fixed
                prop="task.cclasses.course.courseName"
                label="课程名"
                align="center">
        </el-table-column>
        <el-table-column
                fixed
                prop="task.teacher.teacherName"
                label="教师名"
                align="center">
        </el-table-column>
        <el-table-column
                fixed
                prop="room.roomName"
                label="教室名"
                align="center">
        </el-table-column>
        <el-table-column
                fixed
                width="80px"
                prop="timeslot.timeslot"
                label="时间"
                align="center">
        </el-table-column>
        <el-table-column
                fixed
                width="60px"
                prop="task.weekNode"
                label="周节"
                align="center">
        </el-table-column>
        <el-table-column
                width="80px"
                prop="task.startWeek"
                label="开始周"
                align="center">
        </el-table-column>
        <el-table-column
                width="80px"
                prop="task.endWeek"
                label="结束周"
                align="center">
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">调整
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>

    </el-table>

    <!--添加 对话框  1 -->
    <el-dialog title="手动排课" :visible.sync="addFormVisible" width="80%">
        <!--搜索框-->
        <el-form :inline="true" :model="searchForm3" class="demo-form-inline">
            <el-form-item label="班级名：">
                <el-input v-model="searchForm3.cclasses.classesName" placeholder="模糊查询"></el-input>
            </el-form-item>
            <el-form-item label="课程名：">
                <el-input v-model="searchForm3.cclasses.course.courseName" placeholder="模糊查询"></el-input>
            </el-form-item>
            <el-form-item label="教师名：">
                <el-input v-model="searchForm3.teacher.teacherName" placeholder="模糊查询"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="selectTask">查询</el-button>
            </el-form-item>
        </el-form>

        <!--    表格-->
        <el-table
                :data="tableData3"
                style="width: 100%"
        >

            <el-table-column
                    prop="id"
                    label="ID"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="cclasses.classesName"
                    label="班级名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="cclasses.course.courseName"
                    label="课程名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="teacher.teacherName"
                    label="教师名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="weekNode"
                    label="周节"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="startWeek"
                    label="开始周"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="endWeek"
                    label="结束周"
                    align="center">
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit3(scope.$index, scope.row)">选中
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

        <!--  分页  -->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange3"
                    @current-change="handleCurrentChange3"
                    :current-page="currentPage3"
                    :page-sizes="[3, 5, 9]"
                    :page-size="pageSize3"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount3">
            </el-pagination>
        </div>

        <!--选中结果 -->
        <el-form :inline="true" :model="courseTableForm" class="demo-form-inline" style="margin-top: 20px">
            <el-form-item label="班级名">
                <el-input v-model="courseTableForm.task.cclasses.classesName" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="课程名">
                <el-input v-model="courseTableForm.task.cclasses.course.courseName" style="width:100px"
                          :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="教师名">
                <el-input v-model="courseTableForm.task.teacher.teacherName" style="width:100px"
                          :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="周节">
                <el-input v-model="courseTableForm.task.weekNode" style="width:100px" :disabled="true"></el-input>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="choseTask">手动排课</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>

    <!--添加 对话框 2  -->
    <el-dialog title="空教室选择" :visible.sync="addFormVisible2" width="70%">
        <!--搜索框-->
        <el-form :inline="true" :model="searchForm2" class="demo-form-inline">
            <el-form-item label="教室名：">
                <el-input v-model="searchForm2.room.roomName" placeholder="模糊查询"></el-input>
            </el-form-item>
            <el-form-item label="时间：">
                <el-select v-model="week2" clearable placeholder="选择星期" style="width:130px">
                    <el-option
                            clearable
                            v-for="item in options1"
                            :key="item.id"
                            :label="item.weekName"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="time2" clearable placeholder="选择节数" style="width:130px">
                    <el-option
                            clearable
                            v-for="item in options2"
                            :key="item.id"
                            :label="item.timeName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="selectEmptyRoom">查询空教室</el-button>
            </el-form-item>
        </el-form>

        <!--    表格-->
        <el-table
                :data="tableData2"
                stripe
                style="width: 100%"
        >

            <el-table-column
                    fixed
                    width="40px"
                    type="index"
                    label="ID"
                    align="center">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="room.roomName"
                    label="教室名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="room.capacity"
                    label="容量"
                    align="center">
            </el-table-column>
            <el-table-column
                    fixed
                    width="80px"
                    prop="timeslot.timeslot"
                    label="时间"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="room.remark"
                    label="备注"
                    align="center">
            </el-table-column>


            <el-table-column label="操作" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            size="mini"
                            @click="handleEdit2(scope.$index, scope.row)">选中
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

        <!--  分页  -->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage2"
                    :page-sizes="[3, 5, 9]"
                    :page-size="pageSize2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount2">
            </el-pagination>
        </div>

        <!--选中结果 -->
        <el-form :inline="true" :model="courseTableForm" class="demo-form-inline" style="margin-top: 20px">
            <el-form-item label="教室名">
                <el-input v-model="courseTableForm.room.roomName" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="时间">
                <el-input v-model="courseTableForm.timeslot.timeslot" :disabled="true"></el-input>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="addCourseTable">提交</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>


    <!--编辑 对话框   -->
    <el-dialog title="调整排课" :visible.sync="updateFormVisible" width="70%">
        <!--搜索框-->
        <el-form :inline="true" :model="searchForm2" class="demo-form-inline">
            <el-form-item label="教室名：">
                <el-input v-model="searchForm2.room.roomName" placeholder="模糊查询"></el-input>
            </el-form-item>
            <el-form-item label="时间：">
                <el-select v-model="week2" clearable placeholder="选择星期" style="width:130px">
                    <el-option
                            clearable
                            v-for="item in options1"
                            :key="item.id"
                            :label="item.weekName"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="time2" clearable placeholder="选择节数" style="width:130px">
                    <el-option
                            clearable
                            v-for="item in options2"
                            :key="item.id"
                            :label="item.timeName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="selectEmptyRoom">查询空教室</el-button>
            </el-form-item>
        </el-form>

        <!--    表格-->
        <el-table
                :data="tableData2"
                stripe
                style="width: 100%"
                @selection-change="handleSelectionChange"
        >

            <el-table-column
                    fixed
                    width="40px"
                    type="index"
                    label="ID"
                    align="center">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="room.roomName"
                    label="教室名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="room.capacity"
                    label="容量"
                    align="center">
            </el-table-column>
            <el-table-column
                    fixed
                    width="80px"
                    prop="timeslot.timeslot"
                    label="时间"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="room.remark"
                    label="备注"
                    align="center">
            </el-table-column>


            <el-table-column label="操作" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            size="mini"
                            @click="handleEdit2(scope.$index, scope.row)">选中
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

        <!--  分页  -->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page="currentPage2"
                    :page-sizes="[3, 5, 9]"
                    :page-size="pageSize2"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount2">
            </el-pagination>
        </div>

        <!--选中结果 -->
        <el-form :inline="true" :model="courseTableForm" class="demo-form-inline" style="margin-top: 20px">
            <el-form-item label="教室名">
                <el-input v-model="courseTableForm.room.roomName" :disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="时间">
                <el-input v-model="courseTableForm.timeslot.timeslot" :disabled="true"></el-input>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="updateCourseTable">提交</el-button>
            </el-form-item>

        </el-form>

    </el-dialog>


    <!--  分页  -->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </div>

</div>


<!--导入资源-->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>


<script>
    //创建vue核心对象
    new Vue({
        el: "#app",
        mounted() {
            this.selectByCondition();
        },
        methods: {

            //编辑  删除
            handleEdit(index, row) {
                //数据填入  利用JSON解除模型绑定
                this.courseTableForm = JSON.parse(JSON.stringify(row));
                this.selectEmptyRoom();
                //打开编辑表单
                this.updateFormVisible = true;
            },

            handleDelete(index, row) {
                let selection = [];
                selection[0] = row;
                this.multipleSelection = selection;
                this.deleteByIds();
            },

            //查询
            selectByCondition() {
                this.searchForm.timeslot.id = this.week + this.time;
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/courseTable/selectByCondition?" +
                        "currentPage=" + _this.currentPage + "&pageSize=" + _this.pageSize,
                    data: this.searchForm
                }).then(function (resp) {
                    //设置表格数据
                    _this.tableData = resp.data.list;
                    _this.totalCount = resp.data.total;
                })
            },

            //重新自动排课
            reArrangeCourse() {
                var _this = this;
                //未选中
                this.$confirm('此操作将删除之前的排课结果，是否继续？', "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    //加载动画
                    _this.loading = true;
                    //发送ajax请求
                    axios({
                        method: "post",
                        url: 'http://localhost:8080/courseTable/reArrangeCourse',
                    }).then(function (resp) {
                        _this.loading = false;
                        if (resp.data == "success") {
                            //排课成功重新查询
                            _this.selectByCondition();
                            //弹出消息提示
                            _this.$message({
                                message: '排课成功',
                                type: 'success',
                                center: true
                            });
                        } else {
                            //弹出消息提示
                            _this.$message({
                                message: '排课失败,请查看日志！',
                                type: 'error',
                                center: true
                            });
                        }

                    })
                })

            },


            //分页
            handleSizeChange(val) {
                //重新设置每页条目数
                this.pageSize = val;
                //重新查询
                this.selectByCondition();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                //重新查询
                this.selectByCondition();
            },


            //复选事件
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            //批量禁用
            deleteByIds() {
                var _this = this;
                //未选中
                if (this.multipleSelection.length == 0) {
                    //弹出消息提示
                    _this.$message({
                        message: '无选中数据项！',
                        type: 'error',
                        center: true
                    });
                } else {
                    this.$confirm('此操作将删除该排课结果，是否继续？', "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then(() => {
                        //用户点击确认按钮
                        for (let i = 0; i < this.multipleSelection.length; i++) {
                            this.selectIds[i] = this.multipleSelection[i].task.id;
                        }
                        //发送ajax请求
                        axios({
                            method: "post",
                            url: 'http://localhost:8080/courseTable/deleteByIds',
                            data: _this.selectIds
                        }).then(function (resp) {
                            if (resp.data == "success") {
                                //删除成功重新查询
                                _this.selectByCondition();
                                //弹出消息提示
                                _this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    center: true
                                });
                            }

                        })
                    })
                }

            },


            //提交修改表单
            updateCourseTable() {
                var _this = this;
                this.$confirm('此操作将调整排课结果，是否继续？', "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    //发送ajax请求
                    axios({
                        method: "post",
                        url: 'http://localhost:8080/courseTable/update',
                        data: _this.courseTableForm
                    }).then(function (resp) {
                        if (resp.data == "success") {
                            _this.updateFormVisible = false;
                            //删除成功重新查询
                            _this.selectByCondition();
                            //弹出消息提示
                            _this.$message({
                                message: '操作成功',
                                type: 'success',
                                center: true
                            });
                        } else {
                            _this.$message({
                                message: resp.data,
                                type: 'error',
                                center: true
                            });
                        }

                    })
                })

            },


            //课程查询
            selectEmptyRoom() {

                //查询容量足够大的空教室
                this.searchForm2.task.cclasses.size = JSON.parse(JSON.stringify(this.courseTableForm.task.cclasses.size));
                this.searchForm2.timeslot.id = this.week2 + this.time2;
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/courseTable/selectEmptyRoom?" +
                        "currentPage=" + _this.currentPage2 + "&pageSize=" + _this.pageSize2,
                    data: this.searchForm2
                }).then(function (resp) {
                    //设置表格数据
                    _this.tableData2 = resp.data.list;
                    _this.totalCount2 = resp.data.total;
                })
            },
            //选中编辑
            handleEdit2(index, row) {
                //数据填入  利用JSON解除模型绑定
                this.courseTableForm.timeslot = JSON.parse(JSON.stringify(row)).timeslot;
                this.courseTableForm.room = JSON.parse(JSON.stringify(row)).room;
            },
            //课程分页
            handleSizeChange2(val) {
                //重新设置每页条目数
                this.pageSize2 = val;
                //重新查询
                this.selectEmptyRoom();
            },
            handleCurrentChange2(val) {
                this.currentPage2 = val;
                //重新查询
                this.selectEmptyRoom();
            },

            //添加
            addCourseTable() {
                var _this = this;
                axios({
                    method: "post",
                    url: 'http://localhost:8080/courseTable/add',
                    data: _this.courseTableForm
                }).then(function (resp) {
                    if (resp.data == "success") {
                        _this.addFormVisible2 = false;
                        //删除成功重新查询
                        _this.selectByCondition();
                        //弹出消息提示
                        _this.$message({
                            message: '操作成功',
                            type: 'success',
                            center: true
                        });
                    } else {
                        _this.$message({
                            message: resp.data,
                            type: 'error',
                            center: true
                        });
                    }

                })

            },

            //手动排课
            arrangeCourse() {


            },
            //查询未安排的任务
            selectTask() {
                //添加表单
                this.addFormVisible = true;
                //查询所有未安排的教学任务
                var _this = this;
                axios({
                    method: "post",
                    url: "http://localhost:8080/courseTable/selectTask?" +
                        "currentPage=" + _this.currentPage3 + "&pageSize=" + _this.pageSize3,
                    data: this.searchForm3
                }).then(function (resp) {
                    //设置表格数据
                    _this.tableData3 = resp.data.list;
                    _this.totalCount3 = resp.data.total;
                })
            },
            //选中任务
            choseTask() {
                this.addFormVisible = false;
                console.log(this.courseTableForm);
                this.selectEmptyRoom();
                this.addFormVisible2 = true;
            },
            //选中编辑
            handleEdit3(index, row) {
                //数据填入  利用JSON解除模型绑定
                this.courseTableForm.task = JSON.parse(JSON.stringify(row));
            },
            //课程分页
            handleSizeChange3(val) {
                //重新设置每页条目数
                this.pageSize2 = val;
                //重新查询
                this.selectEmptyRoom();
            },
            handleCurrentChange3(val) {
                this.currentPage2 = val;
                //重新查询
                this.selectEmptyRoom();
            },


        },


        //数据
        data() {
            return {
                //分页
                //当前页
                currentPage: 1,
                //总页数
                totalCount: 0,
                //当前条目数
                pageSize: 5,
                //加载
                loading: false,


                //选着的数组
                selectIds: [],

                //添加可见
                addFormVisible: false,
                addFormVisible2: false,
                //修改可见
                updateFormVisible: false,
                searchForm: {
                    task: {
                        cclasses: {
                            course: {
                                courseName: '',
                            }
                        },
                        teacher: {
                            teacherName: '',
                        }
                    },
                    room: {
                        roomName: ''
                    },
                    timeslot: {
                        id: ''
                    },

                },

                oldName: '',
                //添加表单
                courseTableForm: {
                    task: {
                        cclasses: {
                            course: {
                                courseName: ''
                            },
                            classesName: '',
                            size: '',
                        },
                        teacher: {
                            teacherName: ''
                        },
                        weekNode: ''
                    },
                    room: {
                        roomName: ''
                    },
                    timeslot: {}
                },

                //复选的值？
                multipleSelection: [],

                //表格数据
                tableData: [],


                //分配课程
                //当前页
                currentPage2: 1,
                //总页数
                totalCount2: 0,
                //当前条目数
                pageSize2: 3,
                //搜索表单
                searchForm2: {
                    task: {
                        cclasses: {
                            course: {
                                courseName: '',
                            }
                        },
                        teacher: {
                            teacherName: '',
                        }
                    },
                    room: {
                        roomName: ''
                    },
                    timeslot: {
                        id: ''
                    },
                },
                tableData2: [],


                //未安排的教学任务
                //当前页
                currentPage3: 1,
                //总页数
                totalCount3: 0,
                //当前条目数
                pageSize3: 3,
                //搜索表单
                searchForm3: {
                    cclasses: {
                        course: {
                            courseName: ''
                        },
                        classesName: '',
                    },
                    teacher: {
                        teacherName: ''
                    }
                },
                tableData3: [],


                //空教室查询
                options1: [
                    {id: 1, weekName: '星期一'}, {id: 6, weekName: '星期二'},
                    {id: 11, weekName: '星期三'}, {id: 16, weekName: '星期四'},
                    {id: 21, weekName: '星期五'}, {id: 26, weekName: '星期六'},
                    {id: 31, weekName: '星期日'},
                ],
                options2: [
                    {id: 0, timeName: '第一大节'}, {id: 1, timeName: '第二大节'},
                    {id: 2, timeName: '第三大节'}, {id: 3, timeName: '第四大节'},
                    {id: 4, timeName: '第五大节'},
                ],
                week: "",
                time: "",
                week2: "",
                time2: "",
            }
        }
    })

</script>


</body>
</html>